<template>
  <div class="pageChange" :style="`bottom: ${bottom}`" @click.stop>
    <div class="pageContainer">
      <div
        class="homePage"
        :class="isShowMenu ? 'homePage2' : 'homePage1'"
        @click.stop="showMenu"
      ></div>
      <!-- 一级按钮 -->
      <div
        class="menuList"
        :class="{
          menuListOpen: isShowMenu,
          menuListClose: !isShowMenu && !isFirst,
        }"
      >
        <div
          v-for="(btn, index) in firstBtns"
          :key="btn.id"
          class="item"
          :class="{
            ['first' + index]: true,
            itemOpen: isShowMenu,
            itemClose: !isShowMenu && !isFirst,
          }"
          @click.stop="clickMenu(index)"
        >
          <img
            :src="
              firstIndex === index
                ? btn.src2
                : checkedFir[index]
                ? btn.src1
                : btn.src
            "
            alt=""
          />
          <div
            class="label"
            :class="{
              isChoosed: checkedFir[index],
              isActive: firstIndex === index,
            }"
          >
            {{ btn.label }}
          </div>
        </div>
      </div>
    </div>

    <!-- 没有子分类二级选相框 -->
    <div
      v-if="isSecondLevel && !secondBtnsHasChildren"
      class="today-waring-container"
      @click.stop
    >
      <div class="secondBtnTab">
        <div class="tabItem activeItem">{{ title }}</div>
        <div class="close" @click.stop="closeTab"></div>
      </div>
      <div class="checkbox">
        <el-checkbox-group v-model="checkedSecBtn">
          <el-checkbox
            v-for="item in secondBtns"
            :key="item.id"
            :label="item.id"
            :model-value="item.id"
            :class="{ isLastAirline: item.last }"
            :disabled="
              item.id === 'tMap'
                ? cantUnckecktMap
                : item.id === 'wxMap'
                ? cantUnckeckwxMap
                : item.id === 'vectorMap'
                ? cantUnckeckVectorMap
                : false
            "
            @change="chooseSec(item.id)"
          >
            <el-tooltip
              effect="dark"
              :disabled="item.label.length < 5"
              :content="item.label"
              placement="top"
            >
              <div class="label">{{ item.label }}</div>
            </el-tooltip>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 有子分类二级选相框 -->
    <div
      v-if="isSecondLevel && secondBtnsHasChildren"
      class="today-waring-container"
      @click.stop
    >
      <div class="secondBtnTab">
        <div
          class="tabItem"
          :class="{ activeItem: index === checkedSecIndex }"
          v-for="(item, index) in secondBtns"
          @click.stop="chooseSecIndex(index)"
          :key="item.id"
        >
          {{ item.label }}
        </div>
        <el-tooltip effect="dark" content="航线筛选" placement="top">
          <div
            v-if="firstIndex === 2"
            class="showAirline"
            @click.stop="routeClick('ZHONGSHU')"
          ></div>
        </el-tooltip>

        <div class="close" @click.stop="closeTab"></div>
      </div>
      <div class="checkbox">
        <el-checkbox-group v-model="checkedSecBtn">
          <el-checkbox
            v-for="item in secondBtns[checkedSecIndex].children"
            :key="item.id"
            :label="item.id"
            :model-value="item.id"
            @change="chooseSec(item.id)"
          >
            <el-tooltip
              effect="dark"
              :disabled="item.label.length < 5"
              :content="item.label"
              placement="top"
            >
              <div class="label">
                {{ item.label }}
              </div>
            </el-tooltip>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "PageChange",
};
</script>
<script setup>
import {
  computed,
  inject,
  nextTick,
  onMounted,
  watch,
  defineProps,
  watchEffect,
} from "vue";
import useFootBtnsStore from "@/store/modules/footBtns";
import useCockpitStore from "@/store/modules/cockpit";
import { getAirTypeIds } from "@/api/airSpace/enquiry";

const props = defineProps({
  left: {
    type: String,
    default: "1604px",
  },
  bottom: {
    type: String,
    default: "70px",
  },
});

const footBtnsStore = useFootBtnsStore();
const cockpitStore = useCockpitStore();
// 是否显示按钮
const isShowMenu = ref(true);
// 页面是否初次渲染
const isFirst = ref(true);
// 是否显示二级按钮
const isSecondLevel = ref(false);
// 第一级按钮列表
const firstBtns = ref([
  {
    label: "地图样式",
    id: "mapStyle",
    src: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/mapStyle.png",
    src1: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/mapStyle1.png",
    src2: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/mapStyle2.png",
  },
  {
    label: "空域数据",
    id: "airspace",
    src: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/airspace.png",
    src1: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/airspace1.png",
    src2: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/airspace2.png",
  },
  {
    label: "航线数据",
    id: "airRoute",
    src: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/airRoute.png",
    src1: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/airRoute1.png",
    src2: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/airRoute2.png",
  },
  {
    label: "航空器",
    id: "aircraft",
    src: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/aircraft.png",
    src1: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/aircraft1.png",
    src2: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/aircraft2.png",
  },
  {
    label: "目标数据",
    id: "Corp",
    src: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/Corp.png",
    src1: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/Corp1.png",
    src2: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/Corp2.png",
  },
  {
    label: "设备数据",
    id: "device",
    src: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/device.png",
    src1: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/device1.png",
    src2: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/device2.png",
  },
  {
    label: "气象数据",
    id: "weather",
    src: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/weather.png",
    src1: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/weather1.png",
    src2: import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/weather2.png",
  },
]);
// 当前选择的一级按钮索引
const firstIndex = ref(-1);
// 一级按钮的选中状态
const checkedFir = ref([true, false, false, true, false, false, false]);
// 第二级按钮列表
const secondBtns = ref([]);
const secondBtnsHasChildren = ref(false);
// 所有空域id数组
const airspaceId = computed(() => {
  return footBtnsStore.airspaceId;
});
// 被选中的空域数组
const airSpaceClickID = ref([]);
// 分类标题
const title = ref();

// ---------------------------------------------------  inject 注入方法  ----------------------------------------------------

/**
 * @添加与移除企业
 * */
const addCompany = inject("addCompany");
const removeCompany = inject("removeCompany");

/**
 * @添加与移除民航机场
 * */
const addMHAirport = inject("addMHAirport");
const removeMHAirport = inject("removeMHAirport");

/**
 * @添加与移除通航机场
 * */
const addTHAirport = inject("addTHAirport");
const removeTHAirport = inject("removeTHAirport");

/**
 * @添加与移除垂直机场
 * */
const addCZAirport = inject("addCZAirport");
const removeCZAirport = inject("removeCZAirport");

/**
 * @添加与移除无人机机场
 * */
const addWRJAirport = inject("addWRJAirport");
const removeWRJAirport = inject("removeWRJAirport");

/**
 * @添加与移除通航航线
 * */
const addPlaneLine = inject("addPlaneLine");
const removePlaneLine = inject("removePlaneLine");

/**
 * @添加与移除无人机航线
 * */
const addUAVLine = inject("addUAVLine");
const removeUAVLine = inject("removeUAVLine");

/**
 * @添加与移除其它航线
 * */
const addOtherLine = inject("addOtherLine");
const removeOtherLine = inject("removeOtherLine");

/**
 * @卫星地图与矢量地图切换
 * */
const chooseWXMap = inject("chooseWXMap");
const removeWXMap = inject("removeWXMap");
const chooseTMap = inject("chooseTMap");
const removeTMap = inject("removeTMap");
const chooseVectorMap = inject("chooseVectorMap");

/**
 * @添加与移除无人机探测设备
 * */
const addDetectDevice = inject("addDetectDevice");
const removeDetectDevice = inject("removeDetectDevice");

/**
 * @添加与移除无线电压制设备
 * */
const addCounterDevice = inject("addCounterDevice");
const removeCounterDevice = inject("removeCounterDevice");

/**
 * @添加与移除无线电探测设备
 * */
const addRadioDevice = inject("addRadioDevice");
const removeRadioDevice = inject("removeRadioDevice");

/**
 * @添加与移除气象设备
 * */
const addWeatherDevice = inject("addWeatherDevice");
const removeWeatherDevice = inject("removeWeatherDevice");

/**
 * @添加与移除无线电导航诱骗设备
 * */
const addYouPianDevice = inject("addYouPianDevice");
const removeYouPianDevice = inject("removeYouPianDevice");

/**
 * @添加与移除空域
 * */
const addAirspace = inject("addAirspace");
const hideAirspace = inject("hideAirspace");

/**
 * @添加与移除风场
 * */
const createWindy = inject("createWindy");
const closeWindy = inject("closeWindy");

/**
 * @显示与隐藏无人机飞行器
 * */
const addDrone = inject("addDrone");
const removeDrone = inject("removeDrone");

/**
 * @显示与隐藏通航飞行器
 * */
const addPlane = inject("addPlane");
const removePlane = inject("removePlane");

/**
 * @显示与隐藏民航航飞行器
 * */
const addMHPlane = inject("addMHPlane");
const removeMHPlane = inject("removeMHPlane");

/**
 * @查看温度
 * */
const heatMap = inject("heatMap");
// const closeHeatMap = inject("closeHeatMap");

/**
 * @查看降水
 * */
const precipitation = inject("precipitation");

/**
 * @查看风力
 * */
const windPowerShow = inject("windPowerShow");
// const closeWindPower = inject("closeWindPower");

/**
 * @关闭气象
 * */
const closeWeather = inject("closeWeather");

/**
 * @显示与隐藏路网
 * */
const showRoad = inject("showRoad");
const hideRoad = inject("hideRoad");

/**
 * @是否点击地图图标查看详情
 * */
const isShowDetail = inject("isShowDetail");

/**
 * @航线筛选
 * */
const routeClick = inject("routeClick");

// ---------------------------------------------------  一级按钮操作  ------------------------------------------------------------

/**
 * @显示按钮
 * */
const showMenu = () => {
  if (isSecondLevel.value) {
    isSecondLevel.value = false;
    // setTimeout(() => {

    // }, 1500);
    secondBtns.value = [];
    firstIndex.value = -1;
    return;
  }
  isShowMenu.value = !isShowMenu.value;
  isFirst.value = false;
};

/**
 * @点击一级按钮获取二级按钮列表
 * */
const clickMenu = (index) => {
  switch (index) {
    case 0:
      secondBtns.value = footBtnsStore.mapStyle;
      secondBtnsHasChildren.value = false;
      checkedSecIndex.value = 0;
      title.value = "地图样式";
      break;
    case 1:
      secondBtns.value = footBtnsStore.airspace;
      secondBtnsHasChildren.value = false;
      checkedSecIndex.value = 0;
      title.value = "空域数据";
      break;
    case 2:
      secondBtns.value = footBtnsStore.airLine;
      secondBtnsHasChildren.value = true;
      checkedSecIndex.value = 0;
      title.value = "航线数据";
      break;
    case 3:
      secondBtns.value = footBtnsStore.aircraft;
      secondBtnsHasChildren.value = true;
      checkedSecIndex.value = 0;
      break;
    case 4:
      secondBtns.value = footBtnsStore.corp;
      secondBtnsHasChildren.value = false;
      checkedSecIndex.value = 0;
      title.value = "目标数据";
      break;
    case 5:
      secondBtns.value = footBtnsStore.device;
      secondBtnsHasChildren.value = true;
      checkedSecIndex.value = 0;
      break;
    case 6:
      secondBtns.value = footBtnsStore.weather;
      secondBtnsHasChildren.value = false;
      checkedSecIndex.value = 0;
      title.value = "气象数据";
      break;
  }
  firstIndex.value = index;
  isSecondLevel.value = true;
};

/**
 * @关闭二级选项弹窗
 * */
const closeTab = () => {
  isSecondLevel.value = false;
  secondBtnsHasChildren.value = false;
  checkedSecIndex.value = 0;
  firstIndex.value = -1;
  title.value = "";
};

// ---------------------------------------------------  按钮选中  ------------------------------------------------------------
// 点击的二级按钮索引
const checkedSecIndex = ref(0);
// 被选中的二级按钮数组
const checkedSecBtn = ref([
  "tMap",
  "fj",
  "ppwrj",
  "zzwrj",
  "mh"
]);
const weatherOtherArr = [
  "thHX",
  "wrjHX",
  "qiye",
  "jichang",
  "zhence",
  "fanzhi",
  "wuxiandian",
  "qixiang",
  "youpian",
];

const chooseSecIndex = (index) => {
  checkedSecIndex.value = index;
};

/**
 * @点击二级按钮
 * */
const chooseSec = (id) => {
  // console.log(id);
  weatherExclude(id);
  let index = checkedSecBtn.value.findIndex((item) => item === id);
  // console.log(index);
  // checkedSecBtn绑定多选框组的，点击后同步添加，不需要在对数组进行操作
  if (index > -1) {
    isChooseAirspace(id);
    // checkedSecBtn.value.push(id);
    checkedSec(id);
  } else {
    noChooseAirspace(id);
    // checkedSecBtn.value.splice(index, 1);
    uncheckSec(id);
  }
};

/**
 * @选中二级按钮 ：调用方法在地图添加图标
 * */
function checkedSec(id) {
  switch (id) {
    case "wxMap":
      if (
        checkedSecBtn.value.includes("tMap") ||
        checkedSecBtn.value.includes("vectorMap")
      ) {
        let index = checkedSecBtn.value.findIndex(
          (item) => item === "tMap" || item === "vectorMap"
        );
        checkedSecBtn.value.splice(index, 1);
        removeTMap();
      }
      chooseWXMap();
      break;
    case "tMap":
      if (
        checkedSecBtn.value.includes("wxMap") ||
        checkedSecBtn.value.includes("vectorMap")
      ) {
        let index = checkedSecBtn.value.findIndex(
          (item) => item === "wxMap" || item === "vectorMap"
        );
        checkedSecBtn.value.splice(index, 1);
        removeWXMap();
      }
      chooseTMap();
      break;
    case "vectorMap":
      if (
        checkedSecBtn.value.includes("wxMap") ||
        checkedSecBtn.value.includes("tMap")
      ) {
        let index = checkedSecBtn.value.findIndex(
          (item) => item === "wxMap" || item === "tMap"
        );
        checkedSecBtn.value.splice(index, 1);
        removeWXMap();
      }
      chooseVectorMap();
      break;
    case "srfjHX":
      addPlaneLine("srfjHX");
      break;
    case "wxfjHX":
      addPlaneLine("wxfjHX");
      break;
    case "zsjHX":
      addPlaneLine("zsjHX");
      break;
    case "xyjHX":
      addPlaneLine("xyjHX");
      break;
    case "hxjHX":
      addPlaneLine("hxjHX");
      break;
    case "ppUAVHX":
      addUAVLine("ppUAVHX");
      break;
    case "zzUAVHX":
      addUAVLine("zzUAVHX");
      break;
    case "hmHX":
      addOtherLine("hmHX");
      break;
    case "ftHX":
      addOtherLine("ftHX");
      break;
    case "rqqHX":
      addOtherLine("rqqHX");
      break;
    case "qqqHX":
      addOtherLine("qqqHX");
      break;
    case "dlsHX":
      addOtherLine("dlsHX");
      break;
    case "srfj":
      addPlane(1);
      break;
    case "wxfj":
      addPlane(2);
      break;
    case "zsj":
      addPlane(3);
      break;
    case "xyj":
      addPlane(4);
      break;
    case "hxj":
      addPlane(5);
      break;
    case "ppwrj":
      addDrone(1);
      break;
    case "zzwrj":
      addDrone(2);
      break;
    case "mh":
      addMHPlane();
      break;
    case "qiye":
      addCompany();
      break;
    case "mhAirport":
      addMHAirport();
      break;
    case "thAirport":
      addTHAirport();
      break;
    case "czAirport":
      addCZAirport();
      break;
    case "UAVAirport":
      addWRJAirport();
      break;
    case "zhence":
      addDetectDevice();
      break;
    case "fanzhi":
      addCounterDevice();
      break;
    case "wuxiandian":
      addRadioDevice();
      break;
    case "qixiang":
      addWeatherDevice();
      break;
    case "youpian":
      addYouPianDevice();
      break;
    case "wind":
      createWindy();
      break;
    case "rain":
      precipitation();
      clearAllCesiumChart(weatherOtherArr);
      break;
    case "temp":
      heatMap();
      clearAllCesiumChart(weatherOtherArr);
      break;
    case "windPower":
      windPowerShow();
      clearAllCesiumChart(weatherOtherArr);
      break;
  }
}

/**
 * @取消选中二级按钮 ：调用方法移除图标
 * */
function uncheckSec(id) {
  switch (id) {
    case "wxMap":
      removeWXMap();
      break;
    case "tMap":
      removeTMap();
      break;
    case "srfjHX":
      removePlaneLine("srfjHX");
      break;
    case "wxfjHX":
      removePlaneLine("wxfjHX");
      break;
    case "zsjHX":
      removePlaneLine("zsjHX");
      break;
    case "xyjHX":
      removePlaneLine("xyjHX");
      break;
    case "hxjHX":
      removePlaneLine("hxjHX");
      break;
    case "ppUAVHX":
      removeUAVLine("ppUAVHX");
      break;
    case "zzUAVHX":
      removeUAVLine("zzUAVHX");
      break;
    case "hmHX":
      removeOtherLine("hmHX");
      break;
    case "ftHX":
      removeOtherLine("ftHX");
      break;
    case "rqqHX":
      removeOtherLine("rqqHX");
      break;
    case "qqqHX":
      removeOtherLine("qqqHX");
      break;
    case "dlsHX":
      removeOtherLine("dlsHX");
      break;
    case "srfj":
      removePlane(1);
      break;
    case "wxfj":
      removePlane(2);
      break;
    case "zsj":
      removePlane(3);
      break;
    case "xyj":
      removePlane(4);
      break;
    case "hxj":
      removePlane(5);
      break;
    case "ppwrj":
      removeDrone(1);
      break;
    case "zzwrj":
      removeDrone(2);
      break;
    case "mh":
      removeMHPlane();
      break;
    case "qiye":
      removeCompany();
      break;
    case "mhAirport":
      removeMHAirport();
      break;
    case "thAirport":
      removeTHAirport();
      break;
    case "czAirport":
      removeCZAirport();
      break;
    case "UAVAirport":
      removeWRJAirport();
      break;
    case "zhence":
      removeDetectDevice();
      break;
    case "fanzhi":
      removeCounterDevice();
      break;
    case "wuxiandian":
      removeRadioDevice();
      break;
    case "qixiang":
      removeWeatherDevice();
      break;
    case "youpian":
      removeYouPianDevice();
      break;
    case "rain":
      // closePrecipitation();
      closeWeather("rain");
      addAllCesiumChart(weatherOtherArr);
      break;
    case "temp":
      // closeHeatMap();
      closeWeather("temp");
      addAllCesiumChart(weatherOtherArr);
      break;
    case "windPower":
      // closeWindPower();
      closeWeather("wind");
      addAllCesiumChart(weatherOtherArr);
      break;
  }
}

/**
 * @天气二级按钮排他
 * */
function weatherExclude(id) {
  // 判断二级按钮是否选中气象
  if (["windPower", "rain", "temp"].includes(id)) {
    // 气象在二级按钮中的索引
    let index = checkedSecBtn.value.findIndex((item) => item === id);
    // 遍历四个气象
    ["windPower", "rain", "temp"].forEach((item1) => {
      // 如果选中执行关闭方法
      let index = checkedSecBtn.value.findIndex((item2) => item1 === item2);
      if (index > -1) {
        checkedSecBtn.value.splice(index, 1);
        switch (item1) {
          case "rain":
            closeWeather("rain");
            break;
          case "temp":
            closeWeather("temp");
            break;
          case "windPower":
            closeWeather("wind");
            break;
        }
      }
    });
    // 如果按钮已被选中将其添加会数组，以执行后续删除操作
    if (index > -1) checkedSecBtn.value.push(id);
  }
}

/**
 * @展示空域信息
 * */
function isChooseAirspace(id) {
  if (airspaceId.value.includes(id)) {
    airSpaceClickID.value.push(id);
    addAirspace(id);
  } else return false;
}

/**
 * @隐藏空域信息
 * */
function noChooseAirspace(id) {
  if (airspaceId.value.includes(id)) {
    let str = airSpaceClickID.value.findIndex((item) => item === id);
    airSpaceClickID.value.splice(str, 1);
    hideAirspace(id);
  } else return false;
}

const cantUnckecktMap = ref(false);

const cantUnckeckwxMap = ref(false);
const cantUnckeckVectorMap = ref(false);

watch(
  checkedSecBtn,
  (newV, oldV) => {
    let index = checkedSecBtn.value.some((item) => item === "tMap");
    let index1 = checkedSecBtn.value.some((item) => item === "wxMap");
    let index2 = checkedSecBtn.value.some((item) => item === "vectorMap");
    if (index) {
      cantUnckecktMap.value = true;
    } else {
      cantUnckecktMap.value = false;
    }
    if (index1) {
      cantUnckeckwxMap.value = true;
    } else {
      cantUnckeckwxMap.value = false;
    }
    if (index2) {
      cantUnckeckVectorMap.value = true;
    } else {
      cantUnckeckVectorMap.value = false;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

/**
 * @监听二级按钮是否被选中调整对应一级按钮图标
 * */
watch(checkedSecBtn, (newV, oldV) => {
  // 根据选中的一级按钮调整对应图标
  switch (firstIndex.value) {
    case 0:
      checkedFir.value[0] = footBtnsStore.mapStyle.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 1:
      checkedFir.value[1] = footBtnsStore.airspace.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 2:
      checkedFir.value[2] = footBtnsStore.airLine.some((item) =>
          item.children.some((child) => checkedSecBtn.value.includes(child.id))
        // checkedSecBtn.value.includes(item.id)
      );
      break;
    case 3:
      checkedFir.value[3] = footBtnsStore.aircraft.some((item) =>
        item.children.some((child) => checkedSecBtn.value.includes(child.id))
      );
      break;
    case 4:
      checkedFir.value[4] = footBtnsStore.corp.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
    case 5:
      checkedFir.value[5] = footBtnsStore.device.some((item) =>
        item.children.some((child) => checkedSecBtn.value.includes(child.id))
      );
      break;
    case 6:
      checkedFir.value[6] = footBtnsStore.weather.some((item) =>
        checkedSecBtn.value.includes(item.id)
      );
      break;
  }
});

let firstTimer = null;
/**
 * @设置监听页面初始展示所有航线 ：只执行一次
 * */
const onceWatch = watchEffect(() => {
  firstTimer = setTimeout(() => {
    checkedSecBtn.value = [
      ...checkedSecBtn.value,
      ...footBtnsStore.defaultAirspace,
    ];
    checkedFir.value[1] = true;
    airSpaceClickID.value = [...footBtnsStore.defaultAirspace];
    footBtnsStore.defaultAirspace.forEach((item) => {
      addAirspace(item);
    });
    // if (checkedSecBtn.value.includes("srfjHX")) {
    //   addPlaneLine("srfjHX");
    // }
    // if (checkedSecBtn.value.includes("ppUAVHX")) {
    //   addUAVLine("ppUAVHX");
    // }
    // if (checkedSecBtn.value.includes("zzUAVHX")) {
    //   addUAVLine("zzUAVHX");
    // }
    onceWatch();
  }, 8000);

  // onceWatch();
});

const needClearArr = [
  "srfjHX",
  "ppUAVHX",
  "zzUAVHX",
  "fj",
  "ppwrj",
  "zzwrj",
  "mh",
  "qiye",
  "mhAirport",
  "thAirport",
  "czAirport",
  "UAVAirport",
  "zhence",
  "fanzhi",
  "wuxiandian",
  "qixiang",
  "youpian",
];
/**
 * @清除地图所有图标
 * */
const clearAllCesiumChart = (arr) => {
  // 遍历目前被选中的二级按钮数组
  checkedSecBtn.value.forEach((item) => {
    // 如果被选中的二级按钮包含在需要隐藏的数组中
    if (arr.includes(item)) {
      // 执行清除操作
      uncheckSec(item);
    }
  });
  // 隐藏展示的空域
  airSpaceClickID.value.forEach((item) => {
    hideAirspace(item);
  });
};

/**
 * @加载清除掉的图形
 * */
const addAllCesiumChart = (arr) => {
  // 遍历目前被选中的二级按钮数组
  checkedSecBtn.value.forEach((item) => {
    // 如果被选中的二级按钮包含在需要隐藏的数组中
    if (arr.includes(item)) {
      // 执行清除操作
      checkedSec(item);
    }
  });
  // 显示勾选的空域
  airSpaceClickID.value.forEach((item) => {
    addAirspace(item);
  });
};

watch(
  isShowDetail,
  (newV, oldV) => {
    if (newV) {
      clearAllCesiumChart(needClearArr);
      clearTimeout(firstTimer);
      firstTimer = null;
    }
    if (!newV && oldV) {
      // 回显之前再清除一次，防止在查看详情的过程中显示了新的图标，回显时会在添加一次导致新增的图标清除不掉
      clearAllCesiumChart(needClearArr);
      addAllCesiumChart(needClearArr);
    }
  },
  { immediate: true }
);

// -----------------------------------------------  多按钮时切换分页  ------------------------------------------------------------

onMounted(() => {
  footBtnsStore.getAirspace();
});
</script>

<style scoped lang="scss">
.pageChange {
  position: absolute;
  left: 51%;
  width: 470px;
  height: 270px;
  color: white;
  transform: translateX(-53%);
  pointer-events: all;

  .pageContainer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .homePage {
    position: absolute;
    bottom: 0;
    z-index: 30;
    background: url("/img/cockpit/homepage1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    left: 46px;
    width: 340px;
    height: 258px;
    cursor: pointer;

    .prev,
    .next {
      position: absolute;
      bottom: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 54px;
      height: 54px;
      font-size: 12px;
      opacity: 0;
    }

    .prev {
      left: -78px;
      background: url("/public/img/cockpit/PREV.png");
      background-size: auto;
      cursor: pointer;
    }
    .next {
      right: -68px;
      background: url("/public/img/cockpit/NEXT.png");
      background-size: auto;
      cursor: pointer;
    }

    .showBtn {
      animation: showBtn 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .closeBtn {
      animation: closeBtn 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }
  }
  .homePage1 {
    animation-name: myAnimation2;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
  .homePage2 {
    animation-name: myAnimation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }

  .menuList {
    position: absolute;
    left: 0px;
    bottom: -192px;
    width: 432px;
    height: 432px;
    z-index: 25;
    opacity: 0;
    transform: rotate(180deg);

    .item {
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      opacity: 0;
      width: 65px;
      height: 75px;
      transform: rotate(-180deg);
      z-index: 55;
      cursor: pointer;

      img {
        width: 56px;
        height: 56px;
      }

      .label {
        width: 67px;
        height: 18px;
        font-size: 14px;
        text-align: center;
        font-family: PingFang SC;
        // font-weight: bold;
        color: rgba(255, 255, 255, 1);
        // background: linear-gradient(
        //   5deg,
        //   rgba(73, 136, 181, 0.96) 0%,
        //   rgba(255, 255, 255, 0.96) 100%
        // );
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }
      .isChoosed {
        color: rgba(248, 227, 84, 1);
      }
      .isActive {
        // color: rgba(248, 227, 84, 1);
        color: rgba(84, 248, 191, 1);
      }
    }

    .itemOpen {
      animation: itemOpem 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .itemClose {
      animation: itemClose 0.5s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .itemRotateN {
      animation: itemRotateN 0.5s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .itemRotateP {
      animation: itemRotateP 0.5s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .first0 {
      left: 0;
      bottom: 226px;
    }
    .first1,
    .second1 {
      left: 34px;
      bottom: 319px;
    }
    .first2,
    .second2 {
      left: 104px;
      bottom: 373px;
    }
    .first3,
    .second3 {
      left: 198px;
      bottom: 390px;
    }
    .first4,
    .second4 {
      right: 76px;
      bottom: 373px;
    }
    .first5,
    .second5 {
      right: 5px;
      bottom: 319px;
    }
    .first6 {
      right: -29px;
      bottom: 226px;
    }
  }

  .menuListOpen {
    animation: menuOpen 1s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  .menuListClose {
    animation: menuClose 0.5s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  .menuListRotateN {
    animation: menuRotateN 1s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  .menuListRotateP {
    animation: menuRotateP 1s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  .today-waring-container {
    position: absolute;
    z-index: 99;
    margin-bottom: 10px;
    width: 520px;

    padding: 38px 20px 10px;
    bottom: 100%;
    left: -44px;
    background-color: rgba(9, 27, 35, 0.8);
    background: url("/img/cockpit/background2.png");
    background-size: 100% 100%;
    /* animation: borderRotate 3s linear infinite; */

    .checkbox {
      margin-top: 10px;
      width: 100%;
      height: 55px;
      overflow-y: scroll;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.6);
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.2);
      }
    }

    .showAirline {
      position: absolute;
      top: 8px;
      right: 40px;
      width: 55px;
      height: 16px;
      background: url("/img/cockpit/airlineFill.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    .close {
      position: absolute;
      top: 8px;
      right: 15px;
      width: 16px;
      height: 16px;
      color: #fff;
      background: url("/img/cockpit/guanbi.png");
      cursor: pointer;
    }
  }

  .secondBtnTab {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 34px;
    background: rgba(2, 210, 223, 0.3);

    .tabItem {
      width: 23%;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      // font-weight: bold;
      cursor: pointer;
    }

    .tabItem:first-child {
      border-top-left-radius: 7px;
    }

    .activeItem {
      background: url("/img/cockpit/tabBottom.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      // background-size: cover;
      color: #00f0ff;
      // background: rgba(2, 210, 223, 0.5);
    }
  }

  @keyframes borderRotate {
    0% {
      border: 1px rgba(255, 255, 255, 0.4) solid;
    }
    50% {
      border: 1px #ffffff solid;
    }
    100% {
      border: 1px rgba(255, 255, 255, 0.4) solid;
    }
  }

  @keyframes showBtn {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes closeBtn {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0);
    }
  }

  @keyframes myAnimation {
    from {
      left: 46px;
      width: 340px;
      height: 258px;
    }
    to {
      left: 83px;
      width: 273px;
      height: 179px;
    }
  }

  @keyframes myAnimation2 {
    from {
      left: 83px;
      width: 273px;
      height: 179px;
    }
    to {
      left: 46px;
      width: 340px;
      height: 258px;
    }
  }

  @keyframes menuOpen {
    0% {
      // display: block;
      opacity: 0;
      transform: rotate(180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  @keyframes menuRotateN {
    0% {
      opacity: 1;
      transform: rotate(180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  @keyframes menuRotateP {
    0% {
      opacity: 1;
      transform: rotate(180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }

  @keyframes menuClose {
    0% {
      opacity: 1;
      transform: rotate(360deg);
    }
    100% {
      // display: none;
      opacity: 0;
      transform: rotate(180deg);
    }
  }

  @keyframes itemOpem {
    to {
      opacity: 1;
      transform: rotate(-360deg);
    }
  }

  @keyframes itemRotateN {
    0% {
      opacity: 1;
      transform: rotate(-180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(-360deg);
    }
  }

  @keyframes itemRotateP {
    0% {
      opacity: 1;
      transform: rotate(-180deg);
    }
    100% {
      opacity: 1;
      transform: rotate(-360deg);
    }
  }

  @keyframes itemClose {
    0% {
      opacity: 1;
      transform: rotate(-360deg);
    }
    100% {
      opacity: 0;
      transform: rotate(-180deg);
    }
  }
}

.pageChange::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 - Chrome, Safari, and Opera */
}
</style>

<style lang="scss">
.today-waring-container {
  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    gap: 10px;

    .el-checkbox {
      margin: 0;
      width: 31%;
      height: 20px;
      color: #ffffff;

      .label {
        width: 120px;
        text-align: left;
        font-size: 16px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 使用省略号隐藏 */
      }

      .el-checkbox__input {
        .el-checkbox__inner,
        .el-checkbox__original {
          background: transparent;
          border: 1px solid #00fcff;
        }
      }
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #00f0ff;
      }
    }

    .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
      &::after {
        content: "";
        position: absolute;
        display: block !important;
        background-color: #00fcff !important;
        height: 6px !important;
        width: 6px !important;
        border-radius: 1px;
        border: 1px solid #00fcff;
        transform: translate(-2px, 1px);
      }
    }
  }
}
</style>
